<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.10.1/metricsgraphics.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.10.1/metricsgraphics.min.js"></script>
  </head>
  <body>
    <div id="accuracy"></div>
    <script>
    d3.json('report.json', function(err, data) {
      MG.data_graphic({
        title: 'Crop accuracy',
        data: data,
        target: '#accuracy',
        width: 960,
        height: 600,
        x_accessor: 'accuracy',
        x_label: '% Accuracy',
        y_accessor: ['centre', 'entropy', 'attention'],
        legend: ['Centre', 'Entropy', 'Attention']
      });
    });
    </script>
  </body>
</html>
